﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
<link rel="stylesheet" href="__STATIC__/vendors/js/bootstrap-input/css/fileinput.min.css">
{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/bootstrap-input/js/fileinput.min.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-input/js/locales/zh.js"></script>
<script src="__STATIC__/vendors/js/validation/validation.min.js"></script>
<script src="__STATIC__/vendors/js/jquery.form/jquery.form.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/moment.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		//创建时间
		$('#create_date').daterangepicker({
			singleDatePicker: true,
			locale: {
				format:'YYYY-MM-DD',
			}
		});

		//计划日期范围
		$('#daterange').daterangepicker({
			startDate: moment().add(+1,'month').startOf('month'),//表示开始时间为下月1日
			endDate: moment().add(+1,'month').endOf('month'),//表示开始时间为下月1日
			ranges: {
            '下月': [moment().add(+1,'month').startOf('month'), moment().add(+1,'month').endOf('month')],
            '下二月': [moment().add(+1,'month').startOf('month'), moment().add(+2,'month').endOf('month')]
        },
			locale: {
				format:'YYYY-MM-DD',
			}
		});

		//表格提交
        $("#ajaxForm").ajaxForm({
            //定义返回JSON数据，还包括xml和script格式
            dataType: 'json',
			//在发送之前进行的操作，如果有问题，返回false即可不会进行提交
            beforeSend: function () {
            	//定义 form为当前表格
                const form = $("#ajaxForm")

				//如果没有完成校验就返回false不提交
				if (form[0].checkValidity() === false){
					return false;
				}
            },
            success: function (data) {
                //提交成功后调用
                new Noty({
		            type: "success",
		            layout: "topRight",
		            text: "成功新增一条数据，ID为" + data,
		            progressBar: true,
		            timeout: 2500,
		            animation: {
		                open: "animated bounceInRight",
		                close: "animated bounceOutRight"
		            },
		            callbacks: {
		            	afterShow: function() {
		            		$(location).attr('href', '{:url('Plan/index')}');
		            	},
		            }
		        }).show();
                return false;
            },
            error: function(XmlHttpRequest, textStatus, errorThrown){  
                //提交成功后调用
                new Noty({
		            type: "error",
		            layout: "topRight",
		            text: "数据添加失败",
		            progressBar: true,
		            timeout: 2500,
		            animation: {
		                open: "animated bounceInRight",
		                close: "animated bounceOutRight"
		            }
		        }).show();
		        return false;
            } 
        });

        //初始化input
        $("#input").fileinput({
        	uploadAsync: false,
            maxFileCount: 10,
            showPreview:true,
            language: 'zh',
            uploadUrl: '{:url('plan/fileUpload')}',
            required: true,
            showBrowse: true, 
            browseOnZoneClick: true,
            dropZoneEnabled: true,
            allowedFileExtensions: ["pdf"],//只能选择xls,和xlsx格式的文件提交
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            /*不同文件图标配置*/
            previewFileIconSettings: { 
                 'docx': '<i class="la la-file-word-o text-primary" ></i>',
                 'xlsx': '<i class="la la-file-excel-o text-success"></i>',
                 'pptx': '<i class="la la-file-powerpoint-o text-danger"></i>',
                 'jpg': '<i class="la la-file-photo-o text-warning"></i>',
                 'pdf': '<i class="la la-file-pdf-o text-danger"></i>',
                 'zip': '<i class="la la-file-archive-o text-muted"></i>',
                 'doc': '<i class="la la-file-word-o text-primary"></i>',
                 'xls': '<i class="la la-file-excel-o text-success"></i>',
                 'ppt': '<i class="la la-file-powerpoint-o text-danger"></i>',
                 'pdf': '<i class="la la-file-pdf-o text-danger"></i>',
                 'zip': '<i class="la la-file-archive-o text-muted"></i>',
                 'htm': '<i class="la la-file-code-o text-info"></i>',
                 'txt': '<i class="la la-file-text-o text-info"></i>',
                 'mov': '<i class="la la-file-movie-o text-warning"></i>',
                 'mp3': '<i class="la la-file-audio-o text-warning"></i>',
                 'jpg': '<i class="la la-file-photo-o text-danger"></i>', 
                 'gif': '<i class="la la-file-photo-o text-muted"></i>', 
                 'png': '<i class="la la-file-photo-o text-primary"></i>'    
            },
            layoutTemplates:{ actionUpload:''},
            /*上传成功之后运行*/
            fileuploaded:$("#input").on('filebatchuploadsuccess', function (event, data) { 
                // var return_data = $.parseJSON(data.response);
                var return_data = data.response;
                if(return_data.result == true){
                    //提交成功后调用
                    new Noty({
                        type: "success",
                        layout: "topRight",
                        text: "上传成功，总共上传了" + return_data.count + "个文件",
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        },
                        callbacks: {
                            afterShow: function() {
                                //file_id框赋值
                                $('#file_id').val(return_data.file_id);
                                //上传文件框清空重置
                                $('.file1').fileinput('clear').fileinput('refresh').fileinput('enable');
                                //显示追加上传文件的元素
                                $("#uploadFilePreview").removeAttr('hidden');
                                //追加上传文件的元素
                                if(return_data.file.length>0){
                                    $.each(return_data.file,function(index,item){
                                        $("#uploadFilePreview").append('<div class="col-xl-4 offset-md-3" ><div class="input-group"><span class="input-group-addon addon-primary">文件地址</span><input type="text fileupload_url" step="1" class="form-control" name="fileupload_url[]" placeholder="上传文件地址" readonly="readonly" value="'+ item.url +'"></div></div><div  class="col-xl-5" ><div class="input-group"><span class="input-group-addon addon-primary">备注</span><input type="text fileupload_note" step="1" class="form-control" name="fileupload_note[]" placeholder="填写文件备注" required="required"><input name="fileupload_id[]" hidden="hidden" value="'+ item.id+'"></div></div>');
                                    });
                                }
                                //关闭上传modal
                                $('#upload-modal').modal('hide');
                            },
                        }
                    }).show();
                }else{
                    //提交失败后调用
                    new Noty({
                        type: "error",
                        layout: "topRight",
                        text: "上传失败，失败原因是" + return_data.reason,
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        },
                        callbacks: {
                            afterShow: function() {
                                // window.location.reload();
                            },
                        }
                    }).show();
                }
            }),

            /*上传出错误处理*/
            fileerror:$('#input').on('fileerror', function(event, data, msg) {
                console.log(msg);
                //提交失败后调用
                new Noty({
                    type: "error",
                    layout: "topRight",
                    text: "上传失败，失败原因是" + return_data.reason,
                    progressBar: true,
                    timeout: 2500,
                    animation: {
                        open: "animated bounceInRight",
                        close: "animated bounceOutRight"
                    },
                    callbacks: {
                        afterShow: function() {
                            // window.location.reload();
                        },
                    }
                }).show();
            }),
        });
                
	});
 
</script>
{/block}

//页面显示名称
{block name="PageName"}
添加月度市场计划
{/block}

//自定义Modal
{block name="Modal"}
<!-- 导入Modal开始 -->
<div id="upload-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">上传厂家文件</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">关闭</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <label class="control-label"> 选择文件 </label>
                        <input id="input" type="file" class="file1" name="input[]" multiple="multiple">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-shadow" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 导入Modal结束 -->
{/block}

//主页面代码
{block name="main"}
<div class="row">
    <div class="col-xl-12">
        <div class="widget has-shadow">
        	<div class="widget-header bordered no-actions d-flex align-items-center">
                <h2>添加月度市场计划</h2>
            </div>
            <div class="widget-body">
                <form class="needs-validation" novalidate="" id="ajaxForm" action="{:url('Plan/save')}">
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">创建时间 *</label>
	                    <div class="col-xl-9">
	                        <input type="text" class="form-control" placeholder="请输入创建时间" required="required" name="create_date" id="create_date">
	                        <div class="invalid-feedback">
	                        	请输入创建时间
	                    	</div>
	                    </div>
	                </div>
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">计划日期周期 *</label>
	                    <div class="col-xl-9">
	                        <input type="text" class="form-control" placeholder="请输入计划日期周期" required="required" name="daterange" id="daterange">
	                        <div class="invalid-feedback">
	                            请输入计划日期周期
	                        </div>
	                    </div>
	                </div>
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">月度计划名称 *</label>
	                    <div class="col-xl-9">
	                        <input type="text" class="form-control" placeholder="请输入月度计划名称" required="required" name="name">
	                        <div class="invalid-feedback">
	                        	请输入月度计划名称
	                    	</div>
	                    </div>
	                </div>
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">上周期报厂台次 *</label>
	                    <div class="col-xl-9">
	                        <input type="number" step="1" class="form-control" placeholder="请输入上周期报厂台次" required="required" name="declare">
	                        <div class="invalid-feedback">
	                        	请输入上周期报厂台次
	                    	</div>
	                    </div>
	                </div>
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">厂家单台支持 *</label>
	                    <div class="col-xl-9">
	                        <input type="number" step="1" class="form-control" placeholder="请输入单台厂家支持" required="required" name="support">
	                        <div class="invalid-feedback">
	                        	请输入单台厂家支持
	                    	</div>
	                    </div>
	                </div>
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">厂家额外支持 *</label>
	                    <div class="col-xl-9">
	                        <input type="number" step="1" class="form-control" placeholder="请输入厂家额外支持" required="required" name="add_support">
	                        <div class="invalid-feedback">
	                        	请输入厂家额外支持
	                    	</div>
	                    </div>
	                </div>
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">厂家文件</label>
	                    <div class="col-xl-9">
	                    	<div class="input-group">
		                        <input type="text" step="1" class="form-control" name="file_id" id="file_id" placeholder="没有可以暂时不上传" readonly="readonly">
		                        <span class="input-group-btn">
		                        	<button type="button" class="btn btn-primary ripple" data-toggle="modal" data-target="#upload-modal">上传</button>
	                        	</span>
		                    </div>
	                    </div>
	                </div>
                    <div class="form-group row d-flex align-items-center mb-5" id="uploadFilePreview" hidden="hidden">
                        <!-- 上传文件预览并提交备注 -->
                    </div>
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">注意事项 *</label>
	                    <div class="col-xl-9">
	                        <textarea class="form-control"  name="note" id="note" rows="3" required="required" placeholder="请输入接待备注"></textarea>
                            <div class="invalid-feedback">
                                请输入接待备注
                            </div>
	                    </div>
	                </div>
	                <div class="text-right">
		                <button class="btn btn-shadow" type="reset" onclick="history.go(-1);">取消</button>
		                <button class="btn btn-gradient-01" type="submit">提交</button>
		            </div>
		        </form>
            </div>
        </div>
        <!-- End Export -->
    </div>
</div>
{/block}//主页面
